<template>

      <el-card class="order-card" shadow="hover">
        <el-row>
          <el-col :span="5">
            <div class="stat-item">
              <h4>待付款</h4>
              <p @click="showServiceNoPayFlag = true">{{ userServiceNopay.total }}</p>
            </div>
            <!-- 待付款订单详情弹窗 -->
            <el-dialog v-model="showServiceNoPayFlag" title="待付款订单详情">
              <div v-if="userServiceNopay.list">
                <div v-for="order in userServiceNopay.list" :key="order.orderId">
                  <p>订单号: {{ order.orderId }}</p>
                  <p>服务详情: {{ order.serviceDetail }}</p>
                  <p>支付价格: {{ order.totalAmount }}</p>
                  <p>预约时间: {{ order.appointmentTime }}</p>
                  <p>支付状态: {{ chekPayState(order.payStatus) }}</p>
                  <p>订单状态:{{ order.orderState }}</p>
                  <p>备注:{{ order.remark }}</p>
                  <hr />
                </div>
              </div>
              <div v-else>
                <p>没有待付款订单</p>
              </div>
              <span slot="footer" class="dialog-footer">
                <el-button @click="showServiceNoPayFlag = false">关闭</el-button>
              </span>
            </el-dialog>
  
  
          </el-col>
          <el-col :span="5">
            <div class="stat-item">
              <h4>待使用</h4>
              <p @click="showServiceWaitUseFlag = true">{{ userServiceWaitUse.total }}</p>
            </div>
  
            <!-- 待使用订单详情弹窗 -->
            <el-dialog v-model="showServiceWaitUseFlag" title="待使用订单详情">
              <div v-if="userServiceWaitUse.list">
                <div v-for="order in userServiceWaitUse.list" :key="order.orderId">
                  <p>订单号: {{ order.orderId }}</p>
                  <p>服务详情: {{ order.serviceDetail }}</p>
                  <p>支付价格: {{ order.totalAmount }}</p>
                  <p>预约时间: {{ order.appointmentTime }}</p>
                  <p>支付状态: {{ chekPayState(order.payStatus) }}</p>
                  <p>订单状态:{{ order.orderState }}</p>
                  <p>备注:{{ order.remark }}</p>
                  <hr />
                </div>
              </div>
              <div v-else>
                <p>没有待使用订单</p>
              </div>
              <span slot="footer" class="dialog-footer">
                <el-button @click="showServiceWaitUseFlag = false">关闭</el-button>
              </span>
            </el-dialog>
          </el-col>
          <el-col :span="5">
            <div class="stat-item">
              <h4>进行中</h4>
              <P @click="showServiceInUseFlag = true">{{ userServiceInUse.total }}</p>
            </div>
            <!-- 进行中订单详情弹窗 -->
            <el-dialog v-model="showServiceInUseFlag" title="进行中订单详情">
              <div v-if="userServiceInUse.list">
                <div v-for="order in userServiceInUse.list" :key="order.orderId">
                  <p>订单号: {{ order.orderId }}</p>
                  <p>服务详情: {{ order.serviceDetail }}</p>
                  <p>支付价格: {{ order.totalAmount }}</p>
                  <p>预约时间: {{ order.appointmentTime }}</p>
                  <p>支付状态: {{ chekPayState(order.payStatus) }}</p>
                  <p>订单状态:{{ order.orderState }}</p>
                  <p>备注:{{ order.remark }}</p>
                  <el-botton type="primary" @click="addProcess(order.orderId)">新增订单进度</el-botton><br />
                  <hr />
                </div>
              </div>
  
              <div v-else>
                <p>没有进行中订单</p>
              </div>
              <span slot="footer" class="dialog-footer">
                <el-button @click="showServiceInUseFlag = false">关闭</el-button>
              </span>
            </el-dialog>
          </el-col>
          <el-col :span="5">
            <div class="stat-item">
              <h4>待评价</h4>
              <p @click="showServiceEvaluateFlag = true">{{ userServiceEvaluate.total }}</p>
            </div>
            <!-- 进行中订单详情弹窗 -->
            <el-dialog v-model="showServiceEvaluateFlag" title="待评价订单详情">
              <div v-if="userServiceEvaluate.list">
                <div v-for="order in userServiceEvaluate.list" :key="order.orderId">
                  <p>订单号: {{ order.orderId }}</p>
                  <p>服务详情: {{ order.serviceDetail }}</p>
                  <p>支付价格: {{ order.totalAmount }}</p>
                  <p>预约时间: {{ order.appointmentTime }}</p>
                  <p>支付状态: {{ chekPayState(order.payStatus) }}</p>
                  <p>订单状态:{{ order.orderState }}</p>
                  <p>备注:{{ order.remark }}</p>
                  <hr />
                </div>
              </div>
              <div v-else>
                <p>没有待评价订单</p>
              </div>
              <span slot="footer" class="dialog-footer">
                <el-button @click="showServiceEvaluateFlag = false">关闭</el-button>
              </span>
            </el-dialog>
          </el-col>
          <el-col :span="4">
            <div class="stat-item">
              <h4>已完成</h4>
              <p @click="showServiceFinishedFlag = true">{{ userServiceFinished.total }}</p>
            </div>
            <!-- 进行中订单详情弹窗 -->
            <el-dialog v-model="showServiceFinishedFlag" title="已完成订单详情">
              <div v-if="userServiceFinished.list">
                <div v-for="order in userServiceFinished.list" :key="order.orderId">
                  <p>订单号: {{ order.orderId }}</p>
                  <p>服务详情: {{ order.serviceDetail }}</p>
                  <p>支付价格: {{ order.totalAmount }}</p>
                  <p>预约时间: {{ order.appointmentTime }}</p>
                  <p>支付状态: {{ chekPayState(order.payStatus) }}</p>
                  <p>订单状态:{{ order.orderState }}</p>
                  <p>备注:{{ order.remark }}</p>
                  <hr />
                </div>
              </div>
              <div v-else>
                <p>没有已完成订单</p>
              </div>
              <span slot="footer" class="dialog-footer">
                <el-button @click="showServiceFinishedFlag = false">关闭</el-button>
              </span>
            </el-dialog>
          </el-col>
        </el-row>
      </el-card>
      <el-dialog v-model="addProcessFlag" title="新增订单进展详情">
        <el-form>
          <el-form-item label="订单号">
            <el-input v-model="addProcessForm.orderId" disabled></el-input> <!-- 只读输入框 -->
          </el-form-item>
          <el-form-item label="当前状态">
            <el-input v-model="addProcessForm.currentStatus"></el-input> <!-- 只读输入框 -->
          </el-form-item>
          <el-form-item label="下一个状态">
            <el-input v-model="addProcessForm.nextStatus" ></el-input> <!-- 只读输入框 -->
          </el-form-item>
          <el-form-item label="已用时">
            <el-input v-model="addProcessForm.transitionTime" ></el-input> <!-- 只读输入框 -->
          </el-form-item>
          <el-form-item label="描述">
            <el-input v-model="addProcessForm.transitionReason" type="textarea" rows="4"></el-input>
          </el-form-item>
          <el-form-item label="预计需要用时">
            <el-input v-model="addProcessForm.expectedDuration"></el-input>
          </el-form-item>
        </el-form>
        <el-button type="primary" @click="sureAdd">确定</el-button>
  
        <hr />

        <span slot="footer" class="dialog-footer">
          <el-button @click="addProcessFlag = false">关闭</el-button>
        </span>
      </el-dialog>
  </template>
  
  <script>
  import 'core-js/stable';
  import 'regenerator-runtime/runtime';
  export default {
    data() {
      return {
        showServiceNoPayFlag: false,
        showServiceWaitUseFlag: false,
        showServiceInUseFlag: false,
        showServiceFinishedFlag: false,
        showServiceEvaluateFlag: false,
        shopInfo: {},
        userServiceNopay: {},
        userServiceWaitUse: {},
        userServiceInUse: {},
        userServiceFinished: {},
        userServiceEvaluate: {},
        addProcessFlag: false,
        addProcessForm: {},
        // merchantInfo: {
        //   storeName: '示例店铺',
        //   storeAddress: '示例地址',
        //   storePhone: '123456789',
        //   rating: 4.5,
        //   status: 'active',
        //   businessHours: '09:00 - 18:00',
        //   avatar: [{ url: 'https://via.placeholder.com/150' }],
        //   storeDescription: '这是一个示例店铺。',
        //   slogan: '欢迎光临！',
        //   storePhotos: [
        //     { url: 'https://via.placeholder.com/150' },
        //     { url: 'https://via.placeholder.com/150' },
        //   ],
        // },
        // qualificationInfo: {
        //   license: [{ url: 'https://via.placeholder.com/150' }],
        // },
      };
    },
    methods: {
      openDialog(){
        this.$router.push('/shopservice');
      },
      //新增订单进度
      addProcess(orderId) {
        this.addProcessFlag = true;
        this.addProcessForm.orderId = orderId;
      },
      sureAdd(){
        this.$http.post("/order/orderProgress/addNewOrderProgress",this.addProcessForm).then(resp => {
          this.$message(resp.data.message)
        })
      },
      findShopInfo() {
        this.$http.post("/market/shopInfo/getShopInfo").then(res => {
          this.shopInfo = res.data.data;
        });
      },
      findServiceNopay() {
        this.$http.get("/order/order/getOrderListShop", { params: { orderState: 0 } }).then(res => {
          this.userServiceNopay = res.data.data;
        });
      },
      findServiceWaitUse() {
        this.$http.get("/order/order/getOrderListShop", { params: { orderState: 6 } }).then(res => {
          this.userServiceWaitUse = res.data.data;
        });
      },
      findServiceInUse() {
        this.$http.get("/order/order/getOrderListShop", { params: { orderState: 4 } }).then(res => {
          this.userServiceInUse = res.data.data;
        });
      },
      findServiceFinish() {
        this.$http.get("/order/order/getOrderListShop", { params: { orderState: 1 } }).then(res => {
          this.userServiceFinished = res.data.data;
        });
      },
      findServiceEvaluate() {
        this.$http.get("/order/order/getOrderListShop", { params: { orderState: 5 } }).then(res => {
          this.userServiceEvaluate = res.data.data;
        });
      },
      chekPayState(status) {
        if (status == 1) return "已支付"
        if (status == 0) return "未支付"
      },
    },
    created() {
      this.findShopInfo();
      this.findServiceEvaluate();
      this.findServiceFinish();
      this.findServiceInUse();
      this.findServiceNopay();
      this.findServiceWaitUse();
    },
  };
  </script>
  
  <style scoped>
  .merchant-center {
    max-width: 800px;
    margin: 0 auto;
    font-family: Arial, sans-serif;
    line-height: 1.6;
    color: #333;
  }
  
  .title {
    text-align: center;
    color: #ff6a00;
    margin-bottom: 20px;
    font-size: 24px;
  }
  
  .module-title {
    border-bottom: 2px solid #ff6a00;
    padding-bottom: 10px;
    margin-bottom: 15px;
    color: #444;
    font-size: 18px;
  }
  
  .info-item {
    margin-bottom: 12px;
    font-size: 14px;
  }
  
  .image-avatar {
    width: 120px;
    height: 120px;
    object-fit: cover;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    margin-top: 10px;
  }
  
  .store-photos {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 10px;
  }
  
  .image-preview {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }
  </style>